<template>
  <div class="info">
    <div class="top">
      <div class="info-box">
        <div class="info-title">企业名称：</div>
        <div class="info-value">{{info.name}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">企业描述：</div>
        <div class="info-value desc" v-html="info.showContent"></div>
      </div>
      <div class="info-box">
        <div class="info-title">企业宣传照片：</div>
        <div class="info-value">
          <el-image
            style="width: 100px; height: 100px"
            :src="info.showPicUrl"
            fit="cover"
            :preview-src-list="[info.showPicUrl]"
          ></el-image>
        </div>
      </div>
      <div class="info-box">
        <div class="info-title">区域：</div>
        <div class="info-value">{{info.region}}</div>
      </div>
      <div class="info-box">
        <div class="info-title">创建时间：</div>
        <div class="info-value">{{info.createTime}}</div>
      </div>
      <div class="info-box" style="display: block">
        <div class="info-title">人员：</div>
        <enterprise-person
          :list="info.persons"
          :personTypeList="personTypeList"
        ></enterprise-person>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api"
import util from '@/libs/util'
import EnterprisePerson from './EnterprisePerson'

export default {
  name: 'info',
  components: {
    EnterprisePerson
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    regionList: {
      type: Array,
      default: () => []
    },
    nationList: {
      type: Array,
      default: () => []
    },
    personTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    this.queryInfo()
  },
  methods: {
    async queryInfo() {
      let {code, enterprise: data} = await api.PM_ENTERPRISE_INFO({
        id: this.id
      })
      if (code === 0) {
        data.region = util.showDicValue(data.regionId, this.regionList)
        data.persons = data.persons.map(e => {
          return {
            ...e,
            nation: util.showDicValue(e.nationId, this.nationList)
          }
        })
        this.info = data
      }
    },
    handleClickItem () {
      this.$nextTick(() => {
        // 获取遮罩层dom
        let domImageMask = document.querySelector('.el-image-viewer__mask')
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .info {
    .info-box {
      padding-bottom: 10px;
      font-size: 16px;
      display: flex;
      line-height: 30px;
      .info-title {
        color: #606266;
        width: 120px;
        text-align: right;
      }
      .info-value {
        width: 1000px;
        color: #333;
        white-space: normal;
        word-break: break-all;
        &.desc {
          max-height: 200px;
          overflow-y: auto;
          p {
            margin: 0;
            text-indent: 32px;
          }
        }
      }
      .img-list {
        display: flex;
        text-align: center;;
        .img-item {
          margin-right: 10px;
          width: 52px;
          height: 52px;
          border: 1px solid #c0c0c0;
        }
      }
    }
  }
</style>
